<template>
	<view class="fullTextWriting_box">
		<view class="tip_box">
			<text class="text-A">不知道写什么？试试这个</text>
			<image src="/static/create/create_finger.png" mode=""></image>
			<text class="text-B">专业</text>
		</view>
		<view class="title">
			<view>
				想写点什么
				<text>*</text>
			</view>
			<view class="tip">
				至少包含10个字
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="writing" maxlength="200" placeholder="人工智能未来的发展和就业前景" count height="233rpx">
			</u--textarea>
		</view>
		<view class="title">
			<view>
				关键词
				<text>*</text>
			</view>
			<view class="tip">
				至多包含50个字
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="keyWords" maxlength="50" placeholder="猫咪 海鸥  大叔  海洋 天空" count height="150rpx">
			</u--textarea>
		</view>
		<view class="title">
			<view>
				标题
				<text>*</text>
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="title" maxlength="50" placeholder="人工智能未来的发展和就业前景" height="90rpx">
			</u--textarea>
		</view>
		<view class="title">
			<view>
				作文大纲
				<text>*</text>
			</view>
		</view>
		<view class="content">
			<u--textarea v-model="outline" maxlength="200" placeholder="人工智能未来的发展和就业前景" count height="212rpx">
			</u--textarea>
		</view>
		<view class="title">
			<view>
				选择语言
			</view>
		</view>
		<view class="tone_box">
			<view class="toneList" v-for="(item, index) in languageList" :key="index">
				<u-tag :text="item.content" :plain="!item.checked" size="medium" shape="circle" plainFill="true"
					:name="index" @click="languageClick">
				</u-tag>
			</view>
		</view>
		<view class="title">
			<view class="">
				选择语气
			</view>
		</view>
		<view class="tone_box" style="padding-bottom: 180rpx;">
			<view class="toneList" v-for="(item, index) in toneList" :key="index">
				<u-tag :text="item.content" :plain="!item.checked" size="medium" shape="circle" plainFill="true"
					:name="index" @click="toneClick">
				</u-tag>
			</view>
		</view>
		<view class="btn_box">
			<u-button :disabled="!writing.trim()||!keyWords.trim()||!title.trim()||!outline.trim()" text="开始生成"
				shape='circle' size="large" color="#3FC698"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				writing: '',
				keyWords: '',
				title: '',
				outline: '',
				languageList: [{
						checked: true,
						content: '中文'
					},
					{
						checked: false,
						content: 'English'
					}
				],
				toneList: [{
						checked: true,
						content: '有说服力'
					},
					{
						checked: false,
						content: '正式得体'
					},
					{
						checked: false,
						content: '专业'
					},
					{
						checked: false,
						content: '幽默'
					},
					{
						checked: false,
						content: '热情'
					}
				]
			}
		},
		methods: {
			languageClick(name) {
				this.languageList.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			toneClick(name) {
				this.toneList.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
		}
	}
</script>

<style lang="scss">
	.tone_box {
		display: flex;
		padding: 0 37rpx;
		margin-top: 10rpx;
		flex-wrap: wrap;

		.toneList {
			margin-right: 20px;
			margin-top: 21rpx;
		}
	}

	.btn_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background-color: #fff;
	}



	.content {
		margin: auto;
		margin-top: 27rpx;
		width: 694rpx;
		border-radius: 12rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 38rpx;
		margin-left: 37rpx;
		margin-right: 37rpx;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		.tip {
			font-size: 24rpx;
			color: #999999;
		}

		text {
			color: red;
			margin: 0 10rpx;
		}
	}

	.tip_box {
		width: 100%;
		height: 74rpx;
		background: #F7F7F7;
		padding: 0 38rpx;
		box-sizing: border-box;

		image {
			width: 33.82rpx;
			height: 25.97rpx;
			margin: 0 10rpx;
		}

		.text-A {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 74rpx;
		}

		.text-B {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #22B573;
			line-height: 74rpx;
		}

		.aiPaintingDescriptor_box {
			position: relative;
		}
	}

	/deep/.u-button--large {
		width: 80% !important;
	}

	/deep/.u-tag--primary {
		background-color: #4BB591 !important;
		border-width: 0rpx !important;
	}

	/deep/.u-tag--primary--plain {
		border-width: 0rpx !important;
	}

	/deep/.u-tag--primary--plain--fill {
		background-color: #F7F7F7 !important;
	}

	/deep/.u-tag__text--primary--plain {
		color: #333333 !important;

	}

	/deep/.u-textarea {
		background-color: #F7F7F7 !important;
	}

	/deep/.u-textarea__count {
		background-color: #F7F7F7 !important;
	}
</style>